<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	* {margin: 0; padding: 0;}
	#div1 {width: 712px; height: 108px; margin: 100px auto; position: relative; background: red; overflow: hidden;}
	#div1 ul {position: absolute; left: 0; top: 0}
	#div1 ul li {float: left; width: 178px; height: 108px;list-style: none;}
</style>
<script>
		window.onload = function()
		{
				var oDiv = document.getElementById('div1');
				var oUl = oDiv.getElementsByTagName('ul')[0];
				//var oUl = document.getElementsByTagName('ul')[0];
			//var oUl = document.getElementById('ul1');
				var aLi = oUl.getElementsByTagName('li');
			
				//oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
			 //oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
				
				setInterval(function()
																{
																				//向左滚， offsetLeft 是负数
																			if(oUl.offsetLeft < - oUl.offsetWidth)
																				{
																					 oUl.style.left = '0';
																				}
																			oUl.style.left = oUl.offsetLeft - 2 + 'px';
																}
																,100);
				
		};
</script>
</head>

<body>
<div id="div1">
			<ul id="ul1">
				<li> <img src="img2/1.jpg" alt=""></li>
				<li> <img src="img2/2.jpg" alt=""></li>
				<li> <img src="img2/3.jpg" alt=""></li>
				<li> <img src="img2/4.jpg" alt=""></li>
			</ul>
</div>
</body>
</html>
